<script setup>
import { newRandomUid } from "@/utils";
import OImage from "../setting/Images.vue";
import AlphaColor from "../setting/AlphaColor.vue";
import Color from "../setting/Color.vue";
import PrizePopupSelect from "../setting/PrizePopupSelect.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]);

const form = ref({
  $position: { top: 0, left: 13 },
  $size: { width: 338, height: 170 },
  $positionType: "relative",
  $removeable: true,
  bg: "./imagesStatic/activity/teamup_bg.png",
  bgShow: true,
  bgColor: "",
  zonePosition: { left: 23, top: 40 },
  zoneSize: { width: 300, height: 130 },
  timeBgColor: "#FF3C35",
  color: "#999999",
  alignType: "left",
});

const formRef = ref();

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  detail.value.$removeable = true;
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `TeamUp-${newRandomUid()}`;
    detail.value.shareBtnUid = newRandomUid();
    emits("change", detail.value, {
      uid: detail.value.shareBtnUid,
      type: "BButton",
      name: "分享按钮",
      pageConfig: {
        $position: { top: 0, left: 316 },
        $size: { width: 59, height: 28 },
        $positionType: "absolute",
        $removeable: false,
        $pageFlag: detail.value.$pageFlag,
        linkType: "system",
        type: "invite",
        img: new URL(
          "../../../../../assets/images/teamup/fenxiang@2x.png",
          import.meta.url
        ).href,
        // img: "https://minio.lianhaikeji.com/marketing/marketing-center/16644397540006fr5fenxinag@2x.png",
      },
    });
    onChange();
  }
};

const onChange = (val) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else {
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
      }
    });
  });
};

// 组件移除(同时移除分享按钮)
const remove = (pagelist) => {
  let shareBtnIndex = pagelist.findIndex(
    (item) => item.uid === detail.value.shareBtnUid
  );
  if (shareBtnIndex >= 0) pagelist.splice(shareBtnIndex, 1);
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check, remove });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :disabled="disabled"
    label-width="auto"
  >
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <el-form-item label="头像对齐方式:" prop="alignType">
      <el-radio-group v-model="detail.alignType" @change="onChange">
        <el-radio label="left">左对齐</el-radio>
        <el-radio label="center">居中</el-radio>
      </el-radio-group>
    </el-form-item>
    <Color v-model="detail.color" name="文字色" @change="onChange" />
    <Color v-model="detail.timeBgColor" name="倒计时颜色" @change="onChange" />
    <AlphaColor v-model="detail.bgColor" name="背景色" @change="onChange" />
    <OImage
      v-model="detail.bg"
      v-model:show="detail.bgShow"
      v-model:size="detail.$size"
      name="背景图"
      @change="onChange"
    />
  </el-form>
</template>
